<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>绑定值</title>
</head>
<body>

<div id="app">
    <input type="radio" v-model="picked" :value="value">
    <label>单选按钮</label>
    <p>{{ picked }}</p>
    <p> {{ value }} </p>
</div>

<hr>

<div id="app1">
    <input type="checkbox" v-model="toggle" :true-value="value1" :flase-value="value2">
    <label>复选框</label>
    <p>{{ toggle }}</p>
    <p>{{ value1 }}</p>
    <p>{{ value2 }}</p>
</div>

<hr>


<div id="app2">
    <select v-model="selected">
        <option :value="{number :123}">123</option>
    </select>

    {{ selected.number }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">

    /**
     *前面介绍的单选、复选、下拉框时，v-model绑定的值要么是一个静态字符串，要么就是布尔值。
     * 真实业务下绑定的是动态数据，可以使用v-bind指令来实现。
     **/

    //单选框
    // 如果含有value属性，v-model就会优先匹配value的值；如果没有，就会直接匹配text的值
    var app = new Vue({
            el: "#app",
            data: {
                picked: false,  //在选中时,app.picked====app.value，值都是2345
                value: 2345
            }
        });


    //复选框
    var app1 = new Vue({
        el: "#app1",
        data: {
            toggle: false,  //在选中时,app.toggle====app.value1；未选中时,app.toggle====app.value2.
            value1: 'a',
            value2: 'b',
        }
    });


    //下拉框
    var app2 = new Vue({
        el: "#app2",
        data: {
            selected: '',  //在选中时,app.selected是一个Object，所以app.selected.number====123。
        }
    })


</script>
</body>
</html>
